<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播组件测试DEMO</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <script src="lib/layui/layui.js"></script>
    <style>
        /* 轮播文字容器样式 ，这个必须保留到轮播组件的样式作为公用样式*/
        .eht_lunbo_carousel-caption {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: inline-block;
            padding: 8px 15px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            color: white;
            max-width: 90%;
            white-space: nowrap;
        }

        /* 超链接文字样式 */
        .eht_lunbo_carousel-caption a {
            color: #fff;
            text-decoration: none;
        }

        /* 响应式调整，这个必须保留到轮播组件的样式作为公用样式 */
        @media (max-width: 600px) {
            .carousel-container {
                max-width: 100%;
            }
        }
    </style>     
</head>
<body>
    <div class="layui-carousel" id="test10">
        <div carousel-item="test10">
          <div><img src="http://180.76.142.113/pic/1.jpg"><div class="eht_lunbo_carousel-caption">这是图片1的文字</div></div>
          <div><img src="http://180.76.142.113/pic/2.jpg"></div>
          <div><img src="http://180.76.142.113/pic/3.jpg"></div>
          <div><img src="http://180.76.142.113/pic/4.jpg"></div>
        </div>
    </div>
      <script>
        layui.use(['carousel', 'form'], function(){
          var carousel = layui.carousel
          ,form = layui.form;
          //图片轮播
          carousel.render({
            elem: '#test10',//图片容器id
            width: '778px',//轮播框宽度
            height: '440px',//轮播框高度
            autoplay:true,//是否开启自动切换
            interval: 3000,//自动切换时间，如果不添加此参数代表不自动切换
            anim:'fade',//箭头样式：hover悬停显示，always始终显示，fade淡入淡出
            indicator:'outside'//指示器样式：inside容器内部，outside容器外底部部，none不显示
          });
          //事件
            carousel.on('change(test10)', function(res){
                console.log(res)
            });
          

          

        });
        </script>
</body>
</html>